
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { Eye, Heart } from "lucide-react";
import { Favorite } from "@/types/profile";

const myFavorites: Favorite[] = [
  {
    id: "1",
    title: "Innovative Teaching Methods Sharing",
    author: "Ms. Li",
    category: "Teaching Methods",
    favoriteDate: "2025-06-18"
  },
  {
    id: "2",
    title: "Student Mental Health Guidance",
    author: "Prof. Wang",
    category: "Student Wellness",
    favoriteDate: "2025-06-16"
  },
  {
    id: "3",
    title: "Digital Teaching Tools Usage Guide",
    author: "Mr. Zhang",
    category: "Teaching Tools",
    favoriteDate: "2025-06-14"
  }
];

export const MyFavorites = () => {
  return (
    <Card>
      <CardHeader>
        <CardTitle>My Favorites</CardTitle>
        <CardDescription>
          Your saved content and resources
        </CardDescription>
      </CardHeader>
      <CardContent>
        <div className="space-y-4">
          {myFavorites.map((favorite) => (
            <div key={favorite.id} className="border rounded-lg p-4">
              <div className="flex justify-between items-start mb-2">
                <h4 className="font-semibold">{favorite.title}</h4>
                <Badge variant="outline">{favorite.category}</Badge>
              </div>
              <div className="text-sm text-muted-foreground mb-2">
                <span>Author: {favorite.author}</span>
                <span className="ml-4">Saved on: {favorite.favoriteDate}</span>
              </div>
              <div className="flex gap-2">
                <Button size="sm" variant="outline">
                  <Eye className="mr-1 h-3 w-3" />
                  View
                </Button>
                <Button size="sm" variant="outline">
                  <Heart className="mr-1 h-3 w-3 fill-current text-red-500" />
                  Unsave
                </Button>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};
